<template>
    <div class="big-box">
        <div class="pageheader">
            <img :src="article.article_cover">
            <div class="contentimg">
                <h1>{{ article.article_title }}</h1>
                <ul class="contentlist">
                    <li>
                        <i class="iconfont icon-calendar2"></i>
                        发表于: {{ article.createAt }}
                    </li>
                    <li>
                        <i class="iconfont icon-schedule"></i>
                        更新与: {{ article.createAt }}
                    </li>
                    <li>
                        <i class="iconfont icon-icon"></i>
                        点赞: {{ article.articlee_strs }}
                    </li>
                    <li>
                        <i class="iconfont icon-label_fill"></i>
                        标签分类:
                        <span v-for="item in article.lables">{{ item }}</span>

                    </li>
                    <li>
                        <i class="iconfont icon-chakan"></i>
                        浏览量: {{ article.article_viewtime }}
                    </li>
                </ul>
                <div class="changetheme">
                    <div class="change">
                        预览主题:
                        <span>{{ previewTheme }}</span>
                        <ul>
                            <li v-for="item in previewThemeList" @click="changeprewTheme(item)">{{ item }}</li>
                        </ul>
                    </div>
                    <div class="change">
                        代码主题:
                        <span>{{ codeTheme }}</span>
                        <ul>
                            <li v-for="item in codeThemeList" @click="changecodeTheme(item)">{{ item }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <el-row :gutter="15">
                <el-col :xs="24" :sm="17">
                    <div class="article-content">
                        <MdPreview class="md-preview-v3" :modelValue="article.article_content"
                            :editorId="article.article_id.toString()" :previewOnly="true" :preview-theme="previewTheme"
                            :code-theme="codeTheme" theme="light">
                        </MdPreview>
                    </div>
                    <template v-if="nextandprearticlelist.length > 0">
                        <articlefoot :article_author="article.article_author" :nextandprearticlelist="nextandprearticlelist"
                            :article_id="Number(article.article_id)" :articlee_strs="article.articlee_strs.toString()">
                        </articlefoot>
                    </template>

                    <comment :isshowhead="isshowhead" :istoshowcomment="istoshowcomment"
                        @changeshowcomment="changeshowcomment" :typeobj="typeobj">
                        <template #defult>
                            <div class="commentbox">
                                <div class="login-container">
                                    <input type="text" placeholder="昵称(必填)" v-model="form.username">
                                    <input type="text" placeholder="头像地址(选填)" v-model="form.usercover">
                                    <input type="text" placeholder="网址地址(选填)" v-model="form.usersiteurl">
                                </div>
                                <div class="atk-textarea-wrap">
                                    <textarea class="atk-textarea" placeholder="评论一下吧" v-model="form.input"
                                        ref="inputbox"></textarea>
                                    <span @click="toshowemoji"><i class="iconfont icon-icon_xinqing"></i>表情</span>
                                    <button class="sub" @click="subcomment">提交</button>
                                </div>
                            </div>
                            <emoji size="m" :isshow="showemoji" @changeemoji="changeemoji"></emoji>
                        </template>
                    </comment>
                </el-col>
                <el-col :xs="0" :sm="7">
                    <div class="articleright">
                        <Recommendedarticles></Recommendedarticles>
                        <div class="right-boxitem mulu">
                            <h1>目录</h1>
                            <MdCatalog :editorId="article.article_id.toString()" :scrollElement="scrollElement"
                                theme="dark" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { inject, onUnmounted, ref, watch } from "vue"
import articlefoot from "@/components/articlefoot.vue"
import Recommendedarticles from '@/components/Recommendedarticles.vue';
import comment from "@/components/comment.vue";
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getarticle, getPreAndnext, addarticleview } from "@/api/article"
import moment from "moment";
import { SiteInfoStore } from "@/stores/baseSiteInfo.js"
import { MdPreview, MdCatalog } from 'md-editor-v3';
import { storeToRefs } from "pinia";
import emoji from '@/components/emoji.vue'
import { addcomment, getcomment } from "@/api/article.js"
import "md-editor-v3/lib/style.css";
let route = useRoute();
let router = useRouter();
let SiteInfo = SiteInfoStore()
let reload = inject("reload")
let nextandprearticlelist = ref([]);
const scrollElement = document.documentElement;
const { previewThemeList, codeThemeList, codeTheme, previewTheme } = storeToRefs(SiteInfo);
let isshowhead = ref(true);
let istoshowcomment = ref(false);
let article = ref({
    createAt: "",
    updatedAt: "",
    article_title: "",
    article_content: "",
    article_cover: "",
    articlee_strs: "",
    article_id: "",
    lables: [],
    article_viewtime: "",
    article_author: "",
});
let typeobj = ref({
    type: 1,
    id: route.query.id
})
let form = ref({
    input: "",
    username: "",
    usercover: "",
    usersiteurl: ""
})
let inputbox = ref(null)
let showemoji = ref(false)
function toshowemoji() {
    showemoji.value = !showemoji.value
}
function changeemoji(data) {
    form.value.input += data.pop();
    inputbox.value.focus();
}
async function subcomment() {
    if(localStorage.getItem("isLogin")){
        let user = JSON.parse(localStorage.getItem("userinfo"))
        form.value.username = user.username
        form.value.usercover = user.Users_corver
    }
    if (form.value.input.trim() == "" || form.value.username.trim() == "") {
        ElMessage({
            message: '请输入内容',
            type: 'warning',
        })
        return
    } else {
        let res = await addcomment({
            type: 1,
            forid: article.value.article_id.toString(),
            content: form.value.input,
            username: form.value.username,
            usersiteurl: form.value.usersiteurl,
            usercover: form.value.usercover
        })
        if (res.data.status == 200) {
            ElNotification.success({
                title: 'Success',
                message: '评论成功',
                offset: 50,
            })
            resetform()
        } else {
            ElNotification.warning({
                title: 'warning',
                message: '评论失败',
                offset: 50,
            })
            resetform()
        }
        reload()
    }
}
function resetform() {
    form.value.input = "";
    form.value.username = "";
    form.value.usercover = "";
    form.value.usersiteurl = "";
}
function changeshowcomment() {
    istoshowcomment.value = !istoshowcomment.value;
}


onMounted(async () => {

    await gettarticle()
    window.addEventListener("scroll", ok)
})
async function gettarticle() {
    let ress = await getPreAndnext(route.query.id)
    if (ress.data.status == 200) {
        nextandprearticlelist.value = ress.data.data
    }
    let res = await getarticle(route.query.id)
    if (res.data.status == 200) {
        article.value.article_author = res.data.data.article_author
        article.value.createAt = moment(res.data.data.createAt).format("YYYY-MM-DD");
        article.value.updatedAt = moment(res.data.data.updatedAt).format("YYYY-MM-DD");
        article.value.article_title = res.data.data.article_title;
        article.value.article_content = res.data.data.article_content;
        article.value.article_cover = res.data.data.article_cover;
        article.value.articlee_strs = res.data.data.articlee_strs;
        article.value.article_id = res.data.data.id;
        article.value.lables = res.data.data.lables;
        article.value.article_viewtime = res.data.data.article_viewtime
    } else {
        ElMessage({
            message: '出错了',
            type: 'warning',
        })
        router.push("/home")
    }
    addarticleview(route.query.id)
}
function ok() {
    let Cscolltop = document.documentElement.scrollTop;
    let header = document.querySelector(".mulu");
    if (Cscolltop >= 420) {
        header.style.position = "absolute";
        header.style.top = Cscolltop - 200 + "px";
    } else {
        header.style.position = "static";
    }
}
onUnmounted(() => {
    window.removeEventListener("scroll", ok);
})
function changeprewTheme(theme) {
    SiteInfo.changeprewTheme(theme)
}
function changecodeTheme(theme) {
    SiteInfo.changecodeTheme(theme)
}

watch(() => route.query.id, async (newval, oldval) => {
    await gettarticle()
})
</script>

<style lang="scss" scoped>
.commentbox {

    margin: 10px 0;
    height: 15vh;
    width: 100%;
    border: 1px solid #eceff2;
    border-radius: 10px;

    .login-container {

        height: 35%;
        width: 100%;
        padding: 3px;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        border-radius: 10px;

        input {
            @include userTheme {
                color: getThemeValue("fontColor");
                font-family: getThemeValue("fontfamily");
            }

            height: 80%;
            width: 30%;
            border: 0px;
            outline: none;
            /* 移除默认边框 */

            font-size: $font-size-m;
        }
    }

    .atk-textarea-wrap {
        position: relative;
        height: 60%;

        span {
            @include userTheme {
                color: getThemeValue("fontColor");
                font-family: getThemeValue("fontfamily");
            }

            position: absolute;
            cursor: pointer;
            left: 15px;
            bottom: 0px;
            font-size: $font-size-m;

        }

        .atk-textarea {
            @include userTheme {
                color: getThemeValue("fontColor");
               
                font-family: getThemeValue("fontfamily");
            }

            height: 100%;
            box-sizing: border-box;
            width: 100%;
            display: block;
            overflow: hidden;

            font-size: $font-size-m;

            border: 2px solid transparent;
            border-radius: 3px;
            margin-top: 2px;
            padding: 10px 20px;
            resize: none;
            word-wrap: break-word;
            outline: none;

            border-radius: 10px;
        }

        .sub {
            @include userTheme {
               
                color: getThemeValue("fontColor");
                font-family: getThemeValue("fontfamily");
            }

            position: absolute;
            right: 5px;
            bottom: 0px;
            width: 50px;
            height: 30px;

            border: 2px solid #2a2e2e;
            border-radius: 5px;

            font-size: $font-size-m;
            cursor: pointer;
            outline: none;

        }
    }
}

input::placeholder {
    color: #999;
    /* 自定义占位符文本颜色 */
    font-style: italic;
    /* 自定义占位符文本样式 */
    font-size: $font-size-m;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

}

.md-preview-v3,
.article-content {
    z-index: -1;
}

.big-box {
    width: 100%;
    padding-bottom: 10px;

    .pageheader {
        height: 250px;
        width: 100%;
        position: relative;

        img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            filter: blur(2px);
            opacity: 0.9;
        }

        .contentimg {
            @include userTheme {

                font-family: getThemeValue("fontfamily");
            }

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px;
            width: 60%;
            text-align: center;

            h1 {
                font-size: $font-size-xl;
            }

            .contentlist {
                margin-top: 15px;
                display: flex;
                flex-wrap: wrap;
                justify-content: start;

                li {
                    position: relative;
                    margin-left: 10px;

                    span {
                        margin-right: 3px;
                    }

                    &::after {
                        content: "|";
                        position: absolute;
                        right: -3px;
                        top: 0;
                        height: 100%;
                        width: 2px;
                        color: black;
                    }
                }
            }

            .changetheme {
                margin-top: 10px;
                display: flex;
                justify-content: center;
                height: 30px;
                width: 100%;

                .change {
                    position: relative;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    margin: 0 10px;
                    text-align: center;
                    height: 100%;
                    padding: 0 15px;
                    border-radius: 15px;

                    @include userTheme {
                        background-color: getThemeValue("rigthitemColor");
                    }

                    &:hover {
                        @include userTheme {
                            border: getThemeValue("hoverBorder");
                        }

                    }

                    &:hover ul {
                        display: block;
                        animation: move 1s alternate;

                        @include keyframes(move) {
                            0% {
                                transform: translate(-50%, -100%);
                                opacity: 0;
                            }

                            100% {
                                opacity: 1;
                                transform: translate(-50%, 75%);
                            }
                        }
                    }

                    ul {
                        z-index: 999;
                        display: none;
                        transition: all 0.5s ease-in-out;
                        position: absolute;
                        bottom: -100%;
                        left: 50%;
                        transform: translate(-50%, 75%);
                        width: 100%;

                        li {
                            background-color: aliceblue;
                            padding: 0 10px;
                            line-height: 20px;
                            z-index: 999;

                            &:hover {
                                color: rgb(23, 191, 191);
                                background-color: rgb(182, 240, 221);
                            }
                        }
                    }
                }
            }
        }
    }

    .content {
        padding: 20px;
        width: 75%;
        margin: 0 auto;
        margin-top: 15px;


        .article-content {
            @include userTheme {

                font-family: getThemeValue("fontfamily");
            }

            padding: 10px;
            box-shadow: 0 3px 6px 3px rgba(7, 17, 27, .06);
        }

        .articleright {
            position: relative;
        }


    }
}

@media screen and (max-width: 650px) {
    .contentimg {
        font-size: $font-size-s;
        width: 90% !important;
    }

    .content {
        width: 100% !important;
    }
}

.right-boxitem {
    width: 100%;
    border-radius: 15px;
    margin: 10px 0;
}

.mulu {
    cursor: pointer;

    @include userTheme {

        font-family: getThemeValue("fontfamily");
        background-color: getThemeValue("rigthitemColor");
    }

    padding: 20px;

    h1 {
        font-size: $font-size-l;
        margin-bottom: 10px;
    }

}
</style>